<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!--part-->
<div class="ddp-box-part" *ngIf="isShow">
  <div class="ddp-box-title">
    <span class="ddp-box-title-in">
        {{'msg.dp.th.expression' | translate}}<em class="ddp-icon-essential"></em>
        <a href="javascript:" class="ddp-btn-plus" (click)="addFormula();"></a>
    </span>
  </div>
  <div class="ddp-wrap-box-info">
    <!--box scroll -->
    <div class="ddp-wrap-boxwrap" (scroll)="scrollHandler()">
      <div class="ddp-wrap-boxadd" *ngFor="let item of formulas; trackBy:trackByFn; let idx = index;">
        <div class="ddp-wrap-datainput">
            <rule-suggest-input
            [index]="idx"
            [formula]="item.value" [isEmptyViewAll]="true"
            [command]="'window'" [cmdArg]="'value'" [funcType]="'window'"
            [tabIndex]="2" [placeholder]="'msg.dp.th.expression.ph' | translate"
            [fields]="fields"
            (onChange)="item.value = $event" ></rule-suggest-input>
        </div>
        <div class="ddp-ui-buttons">
          <a href="javascript:" [ngClass]="(formulas.length==1)?'ddp-btn-minus ddp-disabled':'ddp-btn-minus'" (click)="deleteFormula(item.id)"></a>
        </div>
      </div>
    </div>
  </div>
</div>
<!--//part-->

<!--part-->
<div class="ddp-box-part" *ngIf="isShow">
  <div class="ddp-box-title">
    {{'msg.dp.th.group.by' | translate}}
  </div>

  <!-- select box -->
  <edit-rule-field-combo [isMulti]="true" [fields]="fields" [selected]="selectedFields" [tabIndex]="3"
                         (onChange)="changeGroupFields($event)" [effectGrid]="true"></edit-rule-field-combo>
  <!-- //select box -->
</div>


<div class="ddp-box-part" *ngIf="isShow">
  <div class="ddp-box-title">
    {{'msg.comm.ui.soring.by' | translate}}
  </div>

  <!-- select box -->
  <edit-rule-field-combo [isMulti]="true" [fields]="fields" [selected]="selectedSortFields" [tabIndex]="4"
                         (onChange)="changeSortFields($event)" [effectGrid]="false"></edit-rule-field-combo>
  <!-- //select box -->
</div>
